<template>
  <div class="container-content">
    <!-- <el-row>
      <el-col class="col-title" :span="24">
        <h3 class="panel-title">合同模板</h3>
        <div>
          <el-button type="primary" @click="save">{{
            editorId ? "修 改" : "新 增"
          }}</el-button>
        </div>
      </el-col>
    </el-row> -->
    <el-card shadow="never">
      <el-form ref="formRef" :model="formObject" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板名称">
              <el-input v-model="formObject.tempName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板类型">
              <!-- <el-input v-model=""></el-input> -->
              <el-select
                :disabled="editorId"
                v-model="formObject.type"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <Editor
      ref="editor"
      editor-id="editor"
      height="500px"
      editorType="1"
      :template-content="formObject.contractTempContent"
    ></Editor>
  </div>
</template>
<script>
import { saveTemp, getDetailContract, editContractList } from "@/api/contract";
import Editor from "../../editor/index.vue";
export default {
  components: { Editor },
  props: ["id"],
  data() {
    return {
      formObject: {
        changeTime: "",
        contractTempContent: "",
        createTime: "",
        id: "",

        limit: 0,
        page: 0,
        supplierId: "",
        tempName: "",
        token: "",
        type: "",
      },
      typeOptions: [],
      contractTempContent: "",
    };
  },
  computed: {
    editorId() {
      return !!this.id || false;
    },
  },
  methods: {
    getSelectOptions() {
      this.getDicts("sys_contract_type").then((res) => {
        if (res.code === 200) {
          this.typeOptions = res.data.map((item) => {
            return {
              id: item.dictSort,
              value: item.dictCode,
              label: item.dictLabel,
            };
          });
        }
      });
    },
    save(cb) {
      let content = this.$refs.editor.getValue();
      let params = {
        id: this.formObject.id,
        tempName: this.formObject.tempName,
        typeId: this.formObject.type,
        contractTempContent: content,
      };
      const back = (name) => {
        this.$store.dispatch("tagsView/delAndPush", {
          name,
          path: "/Contract/ContractPortal",
        });
      };
      if (this.editorId) {
        editContractList(params).then((res) => {
          if (res.code === 200) {
            cb();
            this.$message.success("修改成功");
            back("EditPortal");
          }
        });
      } else {
        saveTemp(params).then((res) => {
          if (res.code === 200) {
            cb();
            this.$message.success("保存成功");
            back("AddPortal");
          }
        });
      }
    },
  },
  created() {
    this.getSelectOptions();
    if (this.id) {
      getDetailContract(this.id).then((res) => {
        if (res.code === 200) {
          this.formObject.tempName = res.data.tempName || "";
          this.formObject.contractTempContent =
            res.data.contractTempContent || "";
          this.formObject.id = res.data.id || "";
          this.formObject.type = res.data.typeId || "";
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.col-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
</style>
